/**
 * 零售出库
 */
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品信息</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 头部筛选 -->
    <span class="el-input">
      供货商筛选：
      <el-select
        v-model="editForm.productType"
        placeholder="请选择供货商"
        style="margin-top: 20px; margin-right: 30px"
        @change="timechange($event)"
      >
        <el-option
          v-for="item in brandOptions"
          :key="item.label"
          :label="item.label"
          :value="item.label"
        ></el-option>
      </el-select>
      商品信息：<el-select
        v-model="editForm.itemname"
        placeholder="请选择商品"
        style="margin-top: 20px; margin-right: 30px"
      >
        <el-option
          v-for="item in productoptins"
          :key="item.id"
          :label="item.label"
          :value="item.label"
        ></el-option>
      </el-select>
      <el-button
        type="primary"
        style="margin-left: 10px"
        @click="handleSearchList()"
        >查询</el-button
      >
      <!-- <el-button style="margin-left: 5px">重置</el-button> -->
    </span>

    <!-- 添加点击 -->
    <!-- <el-form :inline="true" class="user-search">
      <el-form-item>
        <el-button
          size="small"
          type="primary"
          icon="el-icon-plus"
          @click="handleAdd()"
          >新增</el-button
        >
      </el-form-item>
    </el-form> -->
    <!--列表-->
    <el-table
      size="small"
      :data="listData"
      highlight-current-row
      v-loading="loading"
      border
      element-loading-text="拼命加载中"
      style="width: 100%"
    >
      <el-table-column sortable align="center" prop="id" label="id">
      </el-table-column>
      <el-table-column sortable align="center" prop="itemname" label="商品名称">
      </el-table-column>
      <el-table-column sortable align="center" prop="price" label="商品价格">
      </el-table-column>
      <el-table-column
        sortable
        align="center"
        prop="vendorname"
        label="供货商名称"
      >
      </el-table-column>
      <!-- <el-table-column
        sortable
        align="center"
        prop="createTime"
        label="颜色"
      >
      </el-table-column>
      <el-table-column sortable align="center" prop="updateTime" label="类别"></el-table-column>
      <el-table-column sortable align="center" prop="updateTime" label="扩展信息"></el-table-column>
      <el-table-column sortable align="center" prop="updateTime" label="单位"></el-table-column>
      <el-table-column sortable align="center" prop="updateTime" label="安全存量"></el-table-column>
      <el-table-column sortable align="center" prop="updateTime" label="采购价"></el-table-column>
      <el-table-column sortable align="center" prop="updateTime" label="零售价"></el-table-column>
      <el-table-column sortable align="center" prop="updateTime" label="销售价"></el-table-column>
      <el-table-column sortable align="center" prop="updateTime" label="最低售价"></el-table-column>
      <el-table-column sortable align="center" prop="updateTime" label="状态"></el-table-column> -->
      <!-- <el-table-column align="center" label="操作" min-width="80">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleUpdate(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="deleteUser(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column> -->
    </el-table>
    <!-- 分页组件 -->
    <!-- <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      layout="total, sizes,prev, pager, next,jumper"
      :current-page.sync="list.pageNum"
      :page-size="list.pageSize"
      :total="total"
    >
    </el-pagination> -->
    <!--添加 编辑界面 -->
    <!-- <el-dialog
      :title="isEdit ? '编辑' : '添加'"
      :visible.sync="editFormVisible"
      width="30%"
      @click="closeDialog"
    >
      <el-form
        label-width="120px"
        :model="editForm"
        :rules="rules"
        ref="editForm"
      >
        <el-form-item label="单据编号" prop="name">
          <el-input
            size="small"
            v-model="editForm.name"
            auto-complete="off"
            placeholder="请输入名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="产品类型：">
          <el-select
            v-model="editForm.productType"
            placeholder="请选择产品类型"
          >
            <el-option
              v-for="item in brandOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="创建时间：">
          <el-date-picker
            v-model="editForm.createTime"
            type="date"
            placeholder="请选择时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="修改时间：">
          <el-date-picker
            v-model="editForm.updateTime"
            type="date"
            placeholder="请选择时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="产品概述：">
          <tinymce
            :width="595"
            :height="300"
            v-model="editForm.productOverview"
            :key="tinymceFlag"
          ></tinymce>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog">取消</el-button>
        <el-button
          size="small"
          type="primary"
          :loading="loading"
          class="title"
          @click="handleDialogConfirm()"
          >保存</el-button
        >
      </div>
    </el-dialog> -->
  </div>
</template>
<script>
import { getShop } from "../../api/product";

const defaultEditForm = {
  id: null,
  name: null,
  createTime: null,
  updateTime: null,
  productOverview: " ",
  shufflingFigure: null,
};
const defaultListQuery = {
  // orderByField: "create_time",
  productType: "",
  itemname: "",
};
export default {
  data() {
    return {
      loading: false, //是显示加载
      // editFormVisible: false, //控制编辑页面显示与隐藏
      isEdit: false,
      // total: "",
      // 表格
      editForm: Object.assign({}, defaultEditForm),
      // rules表单验证
      rules: {
        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
      },
      listData: [], //用户数据
      list: Object.assign({}, defaultListQuery),
      brandOptions: [
        {
          value: 0,
          label: "腾讯",
        },
        {
          value: 1,
          label: "阿里巴巴",
        },
        {
          value: 1,
          label: "艾弗森",
        },
      ],
      productoptins: [],
    };
  },
  components: {},

  /**
   * 创建完毕
   */
  created() {
    this.editForm.productType = this.brandOptions[0].label;
    this.getdata();
  },
  methods: {
    handleSizeChange(val) {
      this.list.pageNum = 1;
      this.list.pageSize = val;
      this.getdata();
    },
    handleCurrentChange(val) {
      console.log(val);
      this.list.pageNum = val;
      this.getdata();
    },
    // 获取列表
    getdata() {
      this.loading = true;
      let data = {
        vendorname: this.editForm.productType,
        itemname:this.editForm.itemname
      };
      console.log(data);
      getShop(data)
        .then((res) => {
          this.loading = false;
          if (res.code != 200) {
            this.$message({
              type: "info",
              message: res.message,
            });
          } else {
            this.$message({
              type: "success",
              message: res.message,
            });
            this.listData = res.result;
            for (let i in this.listData) {
              this.productoptins.push({
                value: this.listData[i].id,
                label: this.listData[i].itemname,
              });
            }
            // this.total = res.data.total;
            // this.list.pageNum = res.data.pages;
          }
        })
        .catch((err) => {
          this.loading = false;
          this.$message.error("菜单加载失败，请稍后再试！");
        });
    },
    //搜索
    handleSearchList() {
      this.getdata();
    },
    // 供应商名称改变事件重新赋值
    timechange(e) {
      // this.editForm.productType = e;
      for (let i in this.brandOptions) {
        this.brandOptions.push({
          value: this.brandOptions[i].id,
          label: this.brandOptions[i].itemname,
        });
      }
    },
    // 添加
    // handleAdd() {
    //   this.editFormVisible = true;
    //   this.isEdit = false;
    //   this.getBrandList();
    // },
    // getBrandList() {
    //   getProductCenter().then((response) => {
    //     this.brandOptions = [];
    //     let brandList = response.data;
    //     for (let i = 0; i < brandList.length; i++) {
    //       this.brandOptions.push({
    //         label: brandList[i].name,
    //         value: brandList[i].id,
    //       });
    //     }
    //   });
    // },
    // handleBrandChange(val) {
    //   let brandName = "";
    //   for (let i = 0; i < this.brandOptions.length; i++) {
    //     if (this.brandOptions[i].value === val) {
    //       brandName = this.brandOptions[i].label;
    //       break;
    //     }
    //   }
    //   this.editForm.productType = brandName;
    // },
    // //显示编辑界面
    // handleUpdate(index, row) {
    //   this.editFormVisible = true;
    //   this.isEdit = true;
    //   this.getBrandList();
    //   getList(row.id).then((res) => {
    //     if (res.code == 0) {
    //       this.$message({
    //         type: "info",
    //         message: res.message,
    //       });
    //     } else {
    //       this.editForm = res.data;
    //       if (this.editForm.shufflingFigure.split(",").length >= 2) {
    //         let urlArray = this.editForm.shufflingFigure.split(",");
    //         let newUrlArray = urlArray.map((item, index) => {
    //           return {
    //             name: index,
    //             url: item,
    //           };
    //         });
    //         this.fileList = newUrlArray;
    //         this.file = this.editForm.shufflingFigure.split(",");
    //       } else {
    //         this.fileList = [
    //           { name: "xxx", url: this.editForm.shufflingFigure },
    //         ];
    //       }
    //     }
    //   });
    // },

    // // 编辑、增加页面保存方法
    // handleDialogConfirm() {
    //   this.$confirm("是否要确认?", "提示", {
    //     confirmButtonText: "确定",
    //     cancelButtonText: "取消",
    //     type: "warning",
    //   }).then(() => {
    //     if (this.isEdit) {
    //       this.editForm.shufflingFigure = this.file;
    //       updateProduct(this.editForm).then((res) => {
    //         if (res.code == 1) {
    //           this.$message({
    //             message: "修改成功！",
    //             type: "success",
    //           });
    //           this.editFormVisible = false;
    //           this.loading = false;
    //           this.getdata();
    //         } else {
    //           this.$message({
    //             message: res.msg,
    //             type: "info",
    //           });
    //         }
    //       });
    //     } else {
    //       this.editForm.shufflingFigure = this.file;
    //       save(this.editForm).then((res) => {
    //         if (res.code == 1) {
    //           this.$message({
    //             message: "添加成功！",
    //             type: "success",
    //           });
    //           this.getdata();
    //           this.editFormVisible = false;
    //           this.loading = false;
    //         } else {
    //           this.$message({
    //             message: res.msg,
    //             type: "info",
    //           });
    //         }
    //       });
    //     }
    //   });
    // },
    // // 删除
    // deleteUser(index, row) {
    //   this.$confirm("确定要删除吗?", "信息", {
    //     confirmButtonText: "确定",
    //     cancelButtonText: "取消",
    //     type: "warning",
    //   })
    //     .then(() => {
    //       deletes(row.id)
    //         .then((res) => {
    //           if (res.code == 1) {
    //             this.$message({
    //               type: "success",
    //               message: "删除成功!",
    //             });
    //             this.getdata();
    //           } else {
    //             this.$message({
    //               type: "info",
    //               message: res.msg,
    //             });
    //           }
    //         })
    //         .catch((err) => {
    //           this.loading = false;
    //           this.$message.error("删除失败，请稍后再试！");
    //         });
    //     })
    //     .catch(() => {
    //       this.$message({
    //         type: "info",
    //         message: "已取消删除",
    //       });
    //     });
    // },
    // // 关闭编辑、增加弹出框
    // closeDialog() {
    //   this.editFormVisible = false;
    // },
  },
};
</script>
<style >
.el-dialog {
  width: 40% !important;
}
.el-input--small .el-input__inner {
  width: 70%;
}
.bth {
  float: right;
  margin-top: -30px;
  margin-left: -30px;
}
</style>
<style scoped>
.user-search {
  margin-top: 20px;
}
.userRole {
  width: 100%;
}
</style>

 
 